/**
 * Created by miracle on 2017/7/8.
 */
$(function () {
    var arr = []   //存储分类列表数据，以免重复发送请求，节约带宽
    //商品分类标题数据获取
    $.get('http://127.0.0.1:3000/api/getcategorytitle', function (data) {
        var len = data.result.length;
        var str = '';
        for (var i = 0; i < len; i++) {
            var obj = data.result[i];
            str += '<div index="' + obj.titleId + '" class="title">' + obj.title + '<div class="c_title"> > </div></div><div class="ul clearfix"></div>';


            //获取分类列表
            $.get('http://127.0.0.1:3000/api/getcategory?titleid=' + i, function (data) {
                var tid = data.result[0].titleId;
                arr[tid] = data.result;

            })

        }
        console.log(arr[1]);//undefind,无法获取数据。异步加载，$.get(),数据还没有被添加到arr中
        $('.category').append(str);
    })


    $('body').on('click', '.title', function () {
        var index = $(this).attr('index'); //取选中的下标TitleId
        var ul = $('<ul></ul>');    //在上面字符拼接中把ul拼接上去的话，虽然这里不用创建ul，但是ul里的li没点击一个按钮就加倍了，除非在执行此代码之初先移除ul里面的内容
        for (var i = 0; i < arr[index].length; i++) {
            var li = '<li><a href="productlist.html?categoryId='+arr[index][i].categoryId+'">' + arr[index][i].category + '</a></li>';
            ul.append(li);
        }
        //$(this).parent().append(ul);   //用append的话上就会一直添加ul，之前的ul只是被新的ul盖上了，用html就是替换内容
        // $(this).parent().html(ul);      //htm是会替换原来的内容。所以箭头就消失了
        // $(this).next().slideToggle(800);   //this也要用$()包着，否则报错
        $(this).next().html(ul).fadeToggle(800);
    })


    //返回顶部
    $('.back').on('click', function () {
        $('html,body').animate({scrollTop: 0}, 1500);
    })
})